import React, { PureComponent } from "react";
import { Howl } from 'howler';
import Markdown from 'react-markdown';
import moment from 'moment';
import {
  Footer,
  Header,
  Arwes,
  Image,
  Words,
  Frame,
  Table,
  Button,
  Project,
  Row,
  Col,
  Code,
  Link
} from "arwes";
import { HttpClient } from '../../commoe/HttpClient';
export default class mocklist extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      show: false,
      creat: {
        "project": "测试项目",
        "describe": "描述",
        "data": {
          "code": 200,
          "data": {
            "name": "text"
          }
        },
        "url": "text/gettext"
      },
      filelist: [],
      creatshow: false,
      mocklist: []
    };
  }
  componentDidMount() {
    this.sounds = {
      click: new Howl({
        src: ['./sound/click.mp3']
      }),
      typing: new Howl({
        src: ['./sound/typing.mp3']
      }),
      deploy: new Howl({
        src: ['./sound/deploy.mp3']
      }),
    }
    this.setState({
      show: true
    })
    setTimeout(() => {
      const response = HttpClient.query('mock/getAll', 'post')
      response().then(res => {
        console.log(res)
        for (let i = 0; i < res.data.length; i++) {

          console.log(JSON.stringify(res.data[i].data))
          res.data[i].show = false
          res.data[i].edit = false
        }
        this.setState({
          mocklist: res.data
        })
      })
    }, 500);
  }
  creatOne = () => {
    const option = this.state.creat
    const response = HttpClient.query('mock/creatMock', 'post', {
      ...option,
      date: moment().format('YYYY-MM-DD')
    })
    response().then(res => {
      if (res.code != 200) {
        alert(res.data)
      } else {
        const response = HttpClient.query('mock/getAll', 'post')
        response().then(res => {
          console.log(res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].show = false
            res.data[i].edit = false
          }
          alert('新增成功')
          this.setState({
            mocklist: res.data
          })
        })
      }
    })
  }
  updataOneMock(number) {
    const option = this.state.mocklist[number]
    const response = HttpClient.query('mock/updataOne', 'post', option)
    response().then(res => {
      const response = HttpClient.query('mock/getAll', 'post')
        response().then(res => {
          console.log(res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].show = false
            res.data[i].edit = false
          }
          alert('修改成功')
          this.setState({
            mocklist: res.data
          })
        })
    })
  }
  removeOne(number) {
    const option = this.state.mocklist[number]
    const response = HttpClient.query('mock/removeOne', 'post', option)
    response().then(res => {
      const response = HttpClient.query('mock/getAll', 'post')
        response().then(res => {
          console.log(res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].show = false
            res.data[i].edit = false
          }
          this.setState({
            mocklist: res.data
          })
        })
    })
  }
  gohome = (url) => {
    if (this.props.location.pathname == url) {
      return
    }
    this.sounds.click.play()
    this.sounds.deploy.play()
    this.setState({
      show: !this.state.show
    });
    setTimeout(() => {
      this.props.history.push(url);
    }, 500);
  }
  render() {
    const projectlist = this.state.mocklist.map((option, index) => (
      <Project
        style={{ marginTop: 20 }}
        animate
        headerSize='h3'
        icon={(<div onClick={() => {
          var second = confirm("确认删除这条mock记录吗？");
          if (second) {
            this.removeOne(index)
          } else {
            return
          }
        }}><i className='mdi mdi-book-remove' />&nbsp;删除</div>)}
        header={option.project}
      >
        {anim => (
          <>
            <p>
              <Words animate show={anim.entered} layer='control' style={{ fontSize: 18, fontFamily: '站酷文艺体' }}>
                {option.describe}
              </Words>
              {option.show ? (
                <Button onClick={() => {
                  const list = this.state.mocklist
                  list[index].show = false
                  this.setState({
                    mocklist: list
                  })
                  this.forceUpdate();
                }
                } animate show={false}><i style={{ marginLeft: 10 }} className='mdi mdi-arrow-expand-up' /></Button>
              ) : (
                <Button onClick={() => {
                  const list = this.state.mocklist
                  list[index].show = true
                  this.setState({
                    mocklist: list
                  })
                  this.forceUpdate();
                }
                } animate show={false}><i style={{ marginLeft: 10 }} className='mdi mdi-arrow-expand-down' /></Button>
              )}
            </p>
            {option.show ? (
              <p>
                <Code animate type='pre' language='javascript'>{JSON.stringify(option.data, null, "\t")}</Code>
                {option.edit ? (
                  <Button onClick={() => {
                    this.updataOneMock(index)
                  }
                  } animate edit={false}>保存提交</Button>
                ) : (
                  <Button onClick={() => {
                    const list = this.state.mocklist
                    list[index].edit = true
                    this.setState({
                      mocklist: list
                    })
                    this.forceUpdate();
                  }
                  } animate edit={false}>编辑修改</Button>
                )}
              </p>
            ) : ''}
            {option.edit ? (
              <p>
                <textarea rows={'auto'} cols={60} style={{backgroundColor: 'black'}} onChange={e => {
                  const list = this.state.mocklist
                  try {
                    JSON.parse(e.target.value);
                    list[index].data = JSON.parse(e.target.value)
                  } catch (e) {
                    alert('json格式不正确' + e)
                    return;
                  }
                  this.setState({
                    mocklist: list
                  })
                  this.forceUpdate();
                }}>
                  {JSON.stringify(option.data, null, "\t")}
                </textarea>
              </p>
            ) : ''}
            <p style={{ marginTop: 20, color: '#acf9fb' }}>
              {option.url ? (<div style={{ float: 'left' }}><i style={{ marginLeft: 10 }} className='mdi mdi-file-document-box' />&nbsp;{option.url}</div>) : ''}
              {option.date ? (<div style={{ float: 'right' }}><i className='mdi mdi-calendar' />&nbsp;{option.date}</div>) : ''}
            </p>
          </>
        )}
      </Project>
    ))
    return (
      <Arwes
        timeout={1500}
        animate
        show={this.state.show}
        background="./img/background-large.jpg"
        pattern="./img/glow.png"
        style={{ height: '100%' }}
      >
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          <Header animate show={this.state.show}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <a style={{
                textAlign: 'left',
                width: '50%',
                float: 'left',
                padding: '0 10px',
                display: 'inline-block'
              }}>
                <Image
                  show={this.state.show}
                  onClick={() => this.gohome('/')}
                  layer={"header"}
                  animate
                  resources='./img/mine.jpeg'
                  style={{ width: 45, height: 45, margin: 0, display: 'inline-block' }}></Image>
                <Words
                  onClick={() => this.gohome('/')}
                  animate
                  show={this.state.show}
                  style={{
                    display: 'inline-block',
                    fontSize: 28,
                    color: '#a1ecfb',
                    fontFamily: 'Electrolize, sans-serif',
                    textShadow: '0 0 4px',
                    fontWeight: 'bold',
                    textTransform: 'uppercase',
                    margin: '0 0 0 10px',
                    paddingTop: 4,
                    lineHeight: 1,
                    verticalAlign: 'middle'
                  }}>
                  GUO WÉNJUN
                </Words>
              </a>
              <div style={{ textAlign: 'right', width: '50%', float: 'right', padding: '0 10px', marginLeft: 'auto' }}>
                <Link onClick={() => this.gohome('/blog')} style={{ fontFamily: "Electrolize,sans-serif", lineHeight: '45px' }}><i className="mdi mdi-note-outline" /> Blog</Link>
                <Link onClick={() => this.gohome('/paper')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-box-cutter" /> Paper</Link>
                <Link onClick={() => this.gohome('/tools')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-calculator" /> Tools</Link>
              </div>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Header>
          <div
            style={{
              flex: '1',
              padding: '20px 0',
              overflowY: 'auto',
            }}
          >
            <div
              style={{
                margin: '0 auto',
                maxWidth: 800,
                marginBottom: 0,
              }}
            >
              <div style={{ fontSize: 24 }}>
                <Link show={this.state.show}>
                  <i className="mdi mdi-chevron-double-right" />
                  <Words show={this.state.show} animate style={{ marginLeft: 5 }}>MOCK</Words>
                </Link>
                {this.state.creatshow ? (
                  <Link style={{ float: 'right' }} onClick={() => { this.setState({ creatshow: !this.state.creatshow }) }} show={this.state.show}>
                    <i className="mdi mdi-minus" />
                  </Link>
                ) : (
                  <Link style={{ float: 'right' }} onClick={() => { this.setState({ creatshow: !this.state.creatshow }) }} show={this.state.show}>
                    <i className="mdi mdi-plus" />
                  </Link>
                )}
                <div style={{ clear: 'both' }}></div>
              </div>
              {this.state.creatshow ? (
                <Project
                  style={{ marginTop: 20 }}
                  animate
                  headerSize='h3'
                  icon={(<div onClick={() => {
                    this.creatOne()
                  }}><i className='mdi mdi-plus' />&nbsp;新增</div>)}
                  header={'新增'}
                >
                  {anim => (
                    <div>
                      <p>名字<input style={{ marginLeft: 20,backgroundColor: 'black' }} value={this.state.creat.project} onChange={e => {
                        this.state.creat.project = e.target.value
                        this.forceUpdate();
                      }} /></p>
                      <p>描述<input style={{ marginLeft: 20,backgroundColor: 'black' }} value={this.state.creat.describe} onChange={e => {
                        this.state.creat.describe = e.target.value
                        this.forceUpdate();
                      }} /></p>
                      <p>url<input style={{ marginLeft: 20,backgroundColor: 'black' }} value={this.state.creat.url} onChange={e => {
                        this.state.creat.url = e.target.value
                        this.forceUpdate();
                      }} /></p>
                      <p>data<textarea style={{ marginLeft: 20,backgroundColor: 'black' }} rows={'auto'} cols={60} onChange={e => {
                        try {
                          JSON.parse(e.target.value);
                        } catch (e) {
                          alert('json格式不正确' + e)
                          return;
                        }
                        this.state.creat.data = JSON.parse(e.target.value)
                        this.forceUpdate();
                      }}>
                        {JSON.stringify(this.state.creat.data, null, "\t")}
                      </textarea>Î</p>
                    </div>
                  )}
                </Project>
              ) : ('')}
              {projectlist}
            </div>
          </div>
          <Footer animate show={this.state.show} style={{ textAlign: 'left' }}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <Link show={this.state.show} href='https://gitee.com/mimidegongkai' target="_blank">
                <i className="mdi mdi-code-brackets" />
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>Codebase</Words>
              </Link>

              <Link style={{ float: 'right' }} show={this.state.show} href='https://gitee.com/mimidegongkai' target="_blank">
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>ICP:申请审批中...</Words>
              </Link>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Footer>
        </div>
      </Arwes >
    );
  }
}
